<template>
  <div :style="{ height: height, width: width }" />
</template>

<script>
import echarts from "echarts";
import { getBusinessOpportunities } from "@/api/province_jsc";
require("echarts/theme/macarons"); // echarts theme
import resize from "./mixins/resize";
const animationDuration = 3000;
const emphasisStyle = {
  itemStyle: {
    barBorderWidth: 1,
    shadowBlur: 10,
    shadowOffsetX: 0,
    shadowOffsetY: 0,
    shadowColor: "rgba(0,0,0,0.5)",
  },
};
export default {
  mixins: [resize],
  props: {
    listQuery: {
      type: Object,
    },
    width: {
      type: String,
      default: "100%",
    },
    height: {
      type: String,
      default: "350px",
    },
    autoResize: {
      type: Boolean,
      default: true,
    },
  },
  data() {
    return {
      showbtns: false,
      chart: null,
        // this.xData=["课程拍摄与制作服务"]
        // this.yData=["5009000",]
      xData: ["课程拍摄与制作服务","高校邦学习平台","高校邦运营服务",],
      yData: [16388800,1790000,1018000],
      lineData:[32,3,3]
    };
  },

  mounted() {
    this.getList();
  },
  beforeDestroy() {
    if (!this.chart) {
      return;
    }
    this.chart.dispose();
    this.chart = null;
  },
  methods: {
    handleClose() {
      this.editDisabled = false;
    },
    handleShowSearch() {
      this.showbtns = !this.showbtns;
    },
    getList() {
       if(this.listQuery.year!='2020'){
        
           this.xData=[];
           this.yData=[];
           this.lineData=[];
            this.initChart();
           return false
         }
       switch (this.listQuery.month) {
        case "0":
           this.xData= ["课程拍摄与制作服务","高校邦学习平台","高校邦运营服务",]
        this.yData=[16388800,1790000,1018000]
        this.lineData=[32,3,3]
         this.initChart();
          break;
        case "1":
        this.xData= ["课程拍摄与制作服务","高校邦学习平台","高校邦运营服务",]
        this.yData=[0,0,0]
        this.lineData=[0,0,0]
          this.initChart();
          break;
        case "2":
           this.xData= ["课程拍摄与制作服务","高校邦学习平台","高校邦运营服务",]
        this.yData=[0,0,0]
         this.lineData=[0,0,0]
          this.initChart();
          break;
        case "3":
          this.xData=["课程拍摄与制作服务","高校邦学习平台","高校邦运营服务",]
        this.yData=[0,0,0]
         this.lineData=[0,0,0]
          this.initChart();
          break;
        case "4":
          this.xData=["课程拍摄与制作服务","高校邦学习平台","高校邦运营服务"]
        this.yData=["300000",0,0]
         this.lineData=[5,0,0]
          this.initChart();
          break;
        case "5":
           this.xData=["课程拍摄与制作服务","高校邦学习平台","高校邦运营服务"]
        this.yData=[0,0,0]
         this.lineData=[0,0,0]
          this.initChart();
          
          break;
        case "6":
           this.xData=["课程拍摄与制作服务","高校邦学习平台","高校邦运营服务"]
        this.yData=[0,0,0]
         this.lineData=[0,0,0]
          this.initChart();
          break;
        case "7":
            this.xData=["课程拍摄与制作服务","高校邦学习平台","高校邦运营服务"]
        this.yData=[0,0,0]
         this.lineData=[0,0,0]
          this.initChart();
          break;
        case "8":
           this.xData=["课程拍摄与制作服务","高校邦学习平台","高校邦运营服务"]
        this.yData=[0,0,0]
         this.lineData=[0,0,0]
          this.initChart();
          break;
        case "9":
           this.xData=["课程拍摄与制作服务","高校邦学习平台","高校邦运营服务"]
        this.yData=[0,0,0]
 this.lineData=[0,0,0]
          this.initChart();
          break;
        case "10":

            this.xData=["课程拍摄与制作服务","高校邦学习平台","高校邦运营服务"]
        this.yData=["5009000",0,0]
         this.lineData=[6,0,0]
          this.initChart();
          break;
           case "11":
            this.xData=["高校邦学习平台","课程拍摄与制作服务","高校邦运营服务"]
        this.yData=["400000","10351800",0]
         this.lineData=[1,17,0]
          this.initChart();
          break;
           case "12":
            this.xData=["高校邦学习平台 ","高校邦运营服务","课程拍摄与制作服务 "]
        this.yData=["1390000","1018000","728000"]
         this.lineData=[2,3,4]
          this.initChart();
          break;
      }
      // getBusinessOpportunities(this.listQuery).then((res) => {
      //   this.xData = res.data.data.map(function (obj, index, array) {
      //     var rObj = [];
      //     rObj = obj.productTypeName;
      //     return rObj;
      //   });
      //   this.yData = res.data.data.map(function (obj, index, array) {
      //     var rObj2 = [];

      //     rObj2 = obj.contractAmount;
      //     return rObj2;
      //   });
        this.$nextTick(() => {
          this.initChart();
        });
     
    },
    initChart() {
      let _self = this;
      this.chart = echarts.init(this.$el, "macarons");
      this.chart.setOption({
        // color: ["#ff89b0ff", "#ffcf5aff", "#6ef3edff",'#ab84fff','#52a8feff'],
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
            crossStyle: {
              color: "#999",
            },
          },
        },
        toolbox: {},
        legend: {
         

          top: "0",
          data: [
             "商机",
            "数量"
            
          ],
        },
        xAxis: [
          {
             type: "category",
             axisTick:{
              show:false
            },
           
            data: this.xData,
            axisPointer: {
              type: "shadow",
            },
           
            axisLine: {
              lineStyle: {
                color: "#616266",
              },
            },
          },
        ],
          yAxis: [
          {
            type: "value",
             axisLine: {
                show:false,
              lineStyle: {
                color: "#616266",
              },
            },
            axisTick: {
              show: false,
            },
            name: "商机金额",

            nameTextStyle: {
              color: "#616266",
            },
            min: 0,
            // max: 2500,

            axisTick: {
              show: false,
            },
            splitLine: {
              show: false,
            },
              axisLine: {
                show:false,
              lineStyle: {
                color: "#616266",
              },
            },
            axisLabel: {
              formatter: "{value} 元",
              textStyle: {
                color: "#616266",
              },
            },
          },
          {
            type: "value",
            name: "商机数量",
            nameTextStyle: {
              color: "#616266",
            },

            min: 0,
          //  max: 25,
            interval: 5,
            axisTick: {
              show: false,
            },
             axisLine: {
                show:false,
              lineStyle: {
                color: "#616266",
              },
            },
            axisLabel: {
              formatter: "{value} 个",
              textStyle: {
                color: "#616266",
              },
            },
          },
        ],
        series: [
          {
            name: "商机",
            type: "bar",
            barWidth: "60px",
            data: this.yData,
          },
           {
            name: '数量',
            type: 'line',
            yAxisIndex: 1,
            data: this.lineData
        }
        ],
      });
    },
  },
};
</script>
